<header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <h4 style="pointer-events: none;">
    {{ 'PAC.Xpert.CreateToolset' | translate: { Default: 'Create Toolset' } }}
  </h4>

  <ul class="w-80 mx-auto p-1 flex items-center justify-center gap-2 bg-hover-bg rounded-xl"
    cdkListbox
    [(ngModel)]="providerTypes"
  >
    <li #option1="cdkOption" class="p-2 flex-1 flex justify-center items-center h-8 rounded-xl text-sm shrink-0 font-medium cursor-pointer"
      [ngClass]="option1.isSelected() ? 'shadow-md bg-components-card-bg' : ''"
      [cdkOption]="'openapi'">
      <i class="ri-links-line"></i> &nbsp; OpenAPI
    </li>

    <li #option2="cdkOption" class="p-2 flex-1 flex justify-center items-center h-8 rounded-xl text-sm shrink-0 font-medium cursor-pointer"
      [ngClass]="option2.isSelected() ? 'shadow-md bg-components-card-bg' : ''"
      [cdkOption]="'odata'">
      <i class="ri-exchange-2-line"></i> &nbsp; OData</li>
    </ul>
</header>

<div mat-dialog-content>
  @switch (providerTypes()[0]) {
    @case ('openapi') {
      <xpert-tool-openapi-configure #configure
        (valueChange)="onValueChange($event)"
      />
    }
    @case ('odata') {
      <xpert-tool-odata-configure #configure
        (valueChange)="onValueChange($event)"
      />
    }
  }
</div>

<div mat-dialog-actions align="end">
  <div ngmButtonGroup>
    <button mat-stroked-button mat-dialog-close cdkFocusInitial>
      {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
    </button>
    <button mat-raised-button color="accent" [disabled]="!configure()?.isValid()"
      (click)="createTool()">
      {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
    </button>
  </div>
</div>